<template>
  <div class="page">

    <mu-appbar style="width: 100%;" color="primary">
      {{title}}
      <mu-menu slot="right">
        <mu-button flat @click="search()">
          <mu-icon value="search"></mu-icon>
        </mu-button>
      </mu-menu>
    </mu-appbar>

    <div class="top_nav">
      <mu-tabs :value.sync="active" center color="primary" full-width>
        <mu-tab>
          <mu-icon value="star_border"></mu-icon>
          与我相关
        </mu-tab>
        <mu-tab>
          <mu-icon value="drafts"></mu-icon>
          我的消息
        </mu-tab>
        <mu-tab>
          <mu-icon value="person_pin"></mu-icon>
          关注列表
        </mu-tab>
      </mu-tabs>
    </div>

    <!-- 与我相关 -->
    <div class="news_body" v-if="active === 0">
      <mu-expansion-panel v-for="(item,index) in news" :key="index" :expand="panel === index" @change="toggle(index)">
        <div slot="header">已读-{{item.header}}</div>
        {{item.content}}<br>
        {{item.date}}
      </mu-expansion-panel>
    </div>
    <!-- 我的消息 -->
    <div class="news_body" v-if="active === 1">
      <mu-list textline="two-line">
        <mu-list-item v-for="(item,index) in message" :key="index" avatar :ripple="false" button
                      @click="lookMsg(item.msgId)">
          <mu-list-item-action>
            <mu-avatar>
              <img :src="item.headImg">
            </mu-avatar>
          </mu-list-item-action>
          <mu-list-item-content>
            <mu-list-item-title>{{item.nickName}}</mu-list-item-title>
            <mu-list-item-sub-title>
              {{item.msg}}
            </mu-list-item-sub-title>
          </mu-list-item-content>
        </mu-list-item>
        <mu-divider></mu-divider>
      </mu-list>
    </div>
    <!-- 关注列表 -->
    <div class="news_body" v-if="active === 2">
      <mu-list>
        <mu-list-item v-for="(item,index) in friends" :key="index" avatar button :ripple="false"
                      @click="chat(item.userId)">
          <mu-list-item-action>
            <mu-avatar>
              <img :src="item.headImg">
            </mu-avatar>
          </mu-list-item-action>
          <mu-list-item-title>{{item.nickName}}</mu-list-item-title>
        </mu-list-item>
      </mu-list>
    </div>
    <!-- 底部导航 -->
    <Down></Down>
  </div>
</template>

<script>
  import Down from '@/components/common/commonDown'

  export default {
    name: "find",
    components: {Down},
    computed: {},
    data() {
      return {
        title: '消息中心',
        active: 0,
        panel: -1,
        news: [
          {header: '有人赞了你的动态', content: '这是一条消息', date: '2019年8月17日 20:24:24'},
          {header: '有人评论了你的动态', content: '这是一条消息', date: '2019年8月17日 20:24:25'},
          {header: '有人赞了你的动态', content: '这是一条消息', date: '2019年8月17日 20:24:26'}
        ],
        friends: [
          {headImg: require('../assets/1000578.jpg'), nickName: '用户昵称123', userId: '123'},
          {headImg: require('../assets/1000578.jpg'), nickName: '用户昵称123', userId: '123'},
          {headImg: require('../assets/1000578.jpg'), nickName: '用户昵称123', userId: '123'},
          {headImg: require('../assets/1000578.jpg'), nickName: '用户昵称123', userId: '123'},
          {headImg: require('../assets/1000578.jpg'), nickName: '用户昵称123', userId: '123'},
          {headImg: require('../assets/1000578.jpg'), nickName: '用户昵称123', userId: '123'}
        ],
        message: [
          {
            userId: '123',
            headImg: require('../assets/1000578.jpg'),
            msg: '测试消息123',
            msgId: '0000',
            nickName: '用户昵称123'
          },
          {
            userId: '123',
            headImg: require('../assets/1000578.jpg'),
            msg: '测试消息123',
            msgId: '0000',
            nickName: '用户昵称123'
          },
          {
            userId: '123',
            headImg: require('../assets/1000578.jpg'),
            msg: '测试消息123',
            msgId: '0000',
            nickName: '用户昵称123'
          },
          {
            userId: '123',
            headImg: require('../assets/1000578.jpg'),
            msg: '测试消息123',
            msgId: '0000',
            nickName: '用户昵称123'
          },
          {
            userId: '123',
            headImg: require('../assets/1000578.jpg'),
            msg: '测试消息123',
            msgId: '0000',
            nickName: '用户昵称123'
          },
          {userId: '123', headImg: require('../assets/1000578.jpg'), msg: '测试消息123', msgId: '0000', nickName: '用户昵称123'}
        ]
      }
    }
    ,
    methods: {
      search() {
        this.$router.push({path: '/search'})
      },
      toggle(index) {
        this.panel = index
      },
      clear() {
        this.news.length = 0;
        this.news = [];
        this.close();
        this.showDel = true;
      },
      chat(id) {
        alert("点击的用户是" + id)
      },
      lookMsg(msgId) {
        alert("点击的消息是" + msgId)
      }
    }
  }
</script>

<style scoped>
  .news_body {
    width: 96%;
    height: 68vh;
    margin: 0 auto;
    overflow: scroll;
  }

  .top_nav {
    width: 96%;
    height: 10vh;
    margin: 10px auto;
    overflow: hidden;
  }
</style>
